<template>
  <div class="topup">
    <van-nav-bar title="充值">
      <van-icon slot="left" name="arrow-left" @click="$router.back()" />
    </van-nav-bar>
    <van-tabs>
      <!-- 离线支付 -->
      <van-tab title="离线支付">
        <div class="off">
          <p class="usdt">USDT离线支付</p>
          <img
            class="erweima"
            src="../../../assets/snipaste20220720_095907.jpg"
            alt=""
          />
          <p class="usdttwo">使用USDT钱包扫码支付</p>
          <i class="huo">ᅳᅳᅳ &nbsp;&nbsp;&nbsp; 或 &nbsp;&nbsp;&nbsp;ᅳᅳᅳ</i>
          <p class="qianbao">复制链接前往USDT钱包支付</p>
          <div class="lianjie">
            <span class="copy">复制链接：</span>
            <span class="lianjietwo">183hmJHRu1230495jhKO1wdfg</span>
          </div>

          <div class="wenzi"> 
            温馨提示：
            <br> 1、请留意您发起提币的平台是否有收取手续费,如有请留意提币 <br>
            数量加上提币手续费否则不会自动到账单；
             <br> 2、请注意汇率与USDT金额,如长时间停留页面,提交时USDT数<br>
            量会重新变动；
             <br> 3、提交时请实际汇率稳准,到账金额为提交订单的RMB金额;
             <br> 4、请在规定时间内尽快完成充值,避免汇率变更。
          </div>
        </div>
      </van-tab>

      <!-- 在线支付 -->
      <van-tab title="在线支付">

            <div class="huise"></div>
            <div class="xieyi">
                <h6>请选择通用协议</h6>
                <div class="xian"></div>
                <div></div>
                <div class="hong" tabindex="1">
                 <span>ERC20</span> 
                    </div>
                <div class="lan" tabindex="2">
                    <span>TRC20</span>
                    </div>
            </div>
            <div class="huise2"></div>

            <div class="jine">
                <h6>USDT充值金额(元)</h6>
                <div class="xian"></div>
                <span class="rmb">￥</span>
                <input class="chozhi" type="text" placeholder="请输入充值金额,不小于1000" onblur="this.placeholder='请输入充值金额,不小于1000'" onfocus="this.placeholder=''">
                <div class="xian1"></div>
                <span class="huilv">参考汇率:1USDT≈6.4300CNY</span>
                <span class="zhifu">预计支付 <i class="ling">0</i> USDT</span>
                <p>汇率30分钟更新一次,请勿长时间停留,尽快完成充值。</p>
            </div>
            <div class="huise3">
                <button>提交</button>
                <div class="wenzi1"> 
                    温馨提示：
                    <br> 1、请留意您发起提币的平台是否有收取手续费,如有请留意提币 <br>
                    数量加上提币手续费否则不会自动到账单；
                    <br> 2、请注意汇率与USDT金额,如长时间停留页面,提交时USDT数<br>
                    量会重新变动；
                    <br> 3、提交时请实际汇率稳准,到账金额为提交订单的RMB金额;
                    <br> 4、请在规定时间内尽快完成充值,避免汇率变更。
                </div>
            </div>
            
      </van-tab>

      <!-- 扫码支付 -->
      <van-tab title="扫码支付">
            <div class="huise4"></div>
            <div class="xieyi2">
                <h6>请选择通用协议</h6>
                <div class="xian"></div>
                <div class="hong">
                 <span>ERC20</span> 
                    </div>
                <div class="lan">
                    <span>TRC20</span>
                    </div>
            </div>
            <div class="huise5"></div>

            <div class="erweimatwo">
                 <h6>使用USDT钱包扫码支付</h6>
                <div class="xian"></div>
                <img class="zhaopian" src="../../../assets/snipaste20220720_095907.jpg" alt="">
                 <p>长按二维码可保存到本地相册</p>
            </div>
            <div class="huise6">
                <div class="wenzi2"> 
                    温馨提示：
                    <br> 1、请留意您发起提币的平台是否有收取手续费,如有请留意提币 <br>
                    数量加上提币手续费否则不会自动到账单；
                    <br> 2、请注意汇率与USDT金额,如长时间停留页面,提交时USDT数<br>
                    量会重新变动；
                    <br> 3、提交时请实际汇率稳准,到账金额为提交订单的RMB金额;
                    <br> 4、请在规定时间内尽快完成充值,避免汇率变更。
                </div>
            </div>
      </van-tab>

      <!-- 客服充值 -->
      <van-tab title="客服充值">
        <van-cell-group>
          <van-cell is-link>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <span class="custom-title">
                <img class="kefu" src="../../../assets/客服.jpg" alt="" />
                <span class="Tele">客服充值线一</span>
                <span class="time">(08:00-22:00)</span>
              </span>
            </template>
          </van-cell>
        </van-cell-group>

        <van-cell-group>
          <van-cell is-link>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <span class="custom-title">
                <img class="kefu" src="../../../assets/客服.jpg" alt="" />
                <span class="Tele">客服充值线二</span>
                <span class="time">(08:00-22:00)</span>
              </span>
            </template>
          </van-cell>
        </van-cell-group>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>
.topup { 
  // 离线支付
  .off {
    display: flex;
    flex-flow: column;
    flex-wrap: wrap;
    /*主轴上的对齐方式为居中*/
    justify-content: center;
    /*交叉轴上对齐方式为居中*/
    align-items: center;
    .usdt {
      color: #5c5d60;
      font-size: 30px;
    }
    .usdttwo {
      font-size: 28px;
      color: #5c5d60;
    }
    .huo {
      font-style: normal;
      font-size: 28px;
    }
    .qianbao {
      font-size: 28px;
      color: #5c5d60;
    }
    .erweima {
      width: 220px;
      height: 220px;
    }
    .lianjie {
      width: 702px;
      height: 88px;
      background-image: linear-gradient(#ffffff, #fdfdfd, #fcfafa);
      border: 0.5px solid #e0d7d7;
      border-radius: 13px;
      text-align: center;
      .copy {
        font-size: 20px;
        color: #323233;
        line-height: 88px;
        font-weight: 600;
      }
      .lianjietwo {
        font-size: 28px;
        line-height: 88px;
        color: #ec5d29;
      }
    }
    .wenzi{
        margin-top: 30px;
        font-size: 12px;
        color: #A5A9B3;
    }
  }

// 在线支付

.huise{
width: 750px;
height: 20px;
background-color: #F0F0F0;
}
.huise2{
width: 750px;
height: 20px;
background-color: #F0F0F0;
}

.xieyi{  
width: 750px;
height: 180px;
background-color: #FFFFFF;
h6{
    margin-left: 20px;
    margin-top: 50px;
    margin-bottom: 20px;
}
.xian{
    width: 720px;
    border: 0.5px solid #F0F0F0;
    margin-left: 20px;
    margin-bottom: 40px;
}
.hong{
    display: inline-block;
    width: 130px;
    height: 60px;
    margin: 0px 20px 5px 15px ;
    border: 0.5px solid #F0F0F0;
    text-align: center;
    border-radius: 10px;
    
    span{
        font-size: 27px;
    }
}
.hong:hover{
    border: 0.5px solid #EC5D29;
    color: #EC5D29;
} 
.lan{
    width: 130px;
    height: 60px;
      margin: 0px 100px 0 15px ;
    border: 0.5px solid #F0F0F0;
    display: inline-block;
     text-align: center;
    border-radius: 10px;

    span{
        font-size: 27px;
    }
}
.lan:hover{
    border: 0.5px solid #1D87F3;
    color: #1D87F3;
} 

}

.jine{
width: 752px;
height: 380px;
background-color: #ffffff;
h6{
    margin-top: 19px;
    margin-left: 13px;
    margin-bottom: 15px;
}
.xian{    
    width: 720px;
    border: 0.5px solid #F0F0F0;
    margin-left: 20px;
    margin-bottom: 25px;}
 .chozhi{
    border: none;
    margin-top: 70px;

 }
 input::-webkit-input-placeholder {
    /* placeholder颜色  */
    color: #aab2bd;
    /* placeholder字体大小  */
    font-size: 25px;
    /* placeholder位置  */
    text-align: left;
}
.rmb{
    color: #5C5D60;
    font-size: 32px;
}
.xian1{
    width: 720px;
    border: 0.5px solid #F0F0F0;
    margin-top: 30px;
    margin-left: 20px;
    margin-bottom: 10px;
}
.huilv{
    font-size: 20px;
    color: #5C5D60;
    margin-left: 15px;
  margin-right: 170px;
}
.zhifu{
    font-size: 20px;
    color: #5C5D60;
    margin-left: 15px;
  
}
.ling{
    color: #EC5D29;
    font-style: normal;
}
p{
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 20px;
    margin-left: 15px;
    color:#EC5D29
}
}
.huise3{
    width: 752px;
    height: 680px;
    background-color: #F0F0F0;
    button{
        width: 650px;
        height: 85px;
        border-radius: 15px;
        margin-top: 35px;
        font-size: 30px;
        background-image: linear-gradient(#FA7D22,#FA461B);
        border: none;
        color: #ffffff;
    // text-align: center;
        margin-left: 50px;
    }
     .wenzi1{
        margin-top: 25px;
        margin-left: 48px;
        font-size: 12px;
        color: #A5A9B3;
    }
}

.huise4{
width: 750px;
height: 20px;
background-color: #F0F0F0;
}
.xieyi2{

width: 750px;
height: 180px;
background-color: #FFFFFF;
h6{
    margin-left: 20px;
    margin-top: 50px;
    margin-bottom: 20px;
}
.xian{
    width: 720px;
    border: 0.5px solid #F0F0F0;
    margin-left: 20px;
    margin-bottom: 40px;
}
.hong{
    display: inline-block;
    width: 130px;
    height: 60px;
    margin: 0px 20px 0 15px ;
    border: 0.5px solid #F0F0F0;
    text-align: center;
    border-radius: 10px;
    
    span{
        font-size: 27px;
    }
}
.hong:hover{
    border: 0.5px solid #EC5D29;
    color: #EC5D29;
} 
.lan{
    width: 130px;
    height: 60px;
      margin: 0px 100px 0 15px ;
    border: 0.5px solid #F0F0F0;
    display: inline-block;
     text-align: center;
    border-radius: 10px;

    span{
        font-size: 27px;
    }
}
.lan:hover{
    border: 0.5px solid #1D87F3;
    color: #1D87F3;
}
}
.huise5{
 width: 750px;
height: 20px;
background-color: #F0F0F0;
}
.erweimatwo{
    width: 752px;
height: 500px;
background-color: #ffffff;
h6{
    margin-top: 19px;
    margin-left: 13px;
    margin-bottom: 15px;
}
.xian{    
    width: 720px;
    border: 0.5px solid #F0F0F0;
    margin-left: 20px;
    margin-bottom: 25px;}
.zhaopian{
    width: 280px;
    height: 280px;
    margin-left: 235px;
}
p{
    color: #BEBEBF;
    font-size: 24px;
    margin-left: 220px;
}
}
.huise6{
     width: 752px;
    height: 670px;
    padding-top: 20px  ;
    background-color: #F0F0F0;
    .wenzi2{
        margin-top: 40px;
        margin-left: 48px;
        font-size: 12px;
        color: #A5A9B3;
    }
}
  // 客服充值
  .custom-title {
    display: flex;
    height: 50px;
    .kefu{
    }
    .Tele {
      margin-left: 30px;
      margin-bottom: -15px;
      line-height: 50px;
    }
    .time {
      color: #5c5d60;
      margin-left: 13px;
    }
  }
}
</style>
